<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<link rel="shortcut icon" href="#"/>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用户登录</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
</head>
<body>
<div class ="contains">
<span id="switch" onclick="switch_man()">切换至管理员登录</span>
<div class ="content">
<h1 style="text-align:center;">用户登录</h1>
<div id ="face" class ="face"><span id="icon" class="icon" onclick="face_login()">-_-</span></div>
<form>
<ul>
<li><p ><span>身份证号码</span><input type ="text" placeholder ="18位号码" class ="text_style" id="user_uid"></p></li>
<li><p ><span>密码</span><input type ="password" placeholder ="长度大于6位" class ="text_style" id="user_password"></p></li>
</ul>

<div id="camera" class ="camera_content">
<!--<video id="video"controls>-->

  
    <video id="video" style="width: 100%; height:100%;position: absolute;"></video>
    <canvas id="canvas" style="width: 100%; height:100%;position: absolute; display:none;"></canvas> 
    <p style="text-align:center;"><input type="button" id="capture" value="拍照"></p>

</div>

</form>
<div id="draggable" class="ui-widget-content">
<button class ="button" onclick="submit()" >确      定</button>
</div>
</div>
</div>
<div id="background"></div>
 <link th:href ="@{/css/login.css}"  rel ="stylesheet" type ="text/css">
 <script  th:src ="@{/js/login.js}"></script>

</body>
<script type="text/javascript">
//网上找的上传图片方法 最后部分的JX不知道这家伙在写些什么

//访问用户媒体设备的兼容方法
function getUserMedia(constraints, success, error) {
    if (navigator.mediaDevices.getUserMedia) {
        //最新的标准API
        navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
    } else if (navigator.webkitGetUserMedia) {
        //webkit核心浏览器
        navigator.webkitGetUserMedia(constraints, success, error)
    } else if (navigator.mozGetUserMedia) {
        //firfox浏览器
        navigator.mozGetUserMedia(constraints, success, error);
    } else if (navigator.getUserMedia) {
        //旧版API
        navigator.getUserMedia(constraints, success, error);
    }
}

let video = document.getElementById('video');
let canvas = document.getElementById('canvas');
let context = canvas.getContext('2d');

function success(stream) {
    //兼容webkit核心浏览器
    let CompatibleURL = window.URL || window.webkitURL;
    //将视频流设置为video元素的源
   // console.log(stream);

    //video.src = CompatibleURL.createObjectURL(stream);
    video.srcObject = stream;
    video.play();
}

function error(error) {
    console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);
}

if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
    //调用用户媒体设备, 访问摄像头
    getUserMedia({auto:true,video:true
    }, success, error);
} else {
    alert('不支持访问用户媒体');
}

document.getElementById('capture').addEventListener('click', function () {
      context.drawImage(video,0,40,640,650, 0,0,300,225);

    function convertCanvasToImage(canvas) {
        var image = new Image();
        image.src = canvas.toDataURL("image/png");
        return image;
    }

    // let imgElement = convertCanvasToImage(canvas);
    // document.body.appendChild(imgElement)
    setTimeout(() => {
        send()
    }, 300)
  
    
var name= $("#capture").val();
    if(name=="拍照"){
   $("#video").hide();
    $("#canvas").show();
    $("#capture").val("重写拍照");
  }else {  
    $("#canvas").hide();
    $("#video").show(); 
    $("#capture").val("拍照");
    }
})

function dataURItoBlob(base64Data) {
    var byteString;
    if (base64Data.split(',')[0].indexOf('base64') >= 0)
        byteString = atob(base64Data.split(',')[1]);
    else
        byteString = unescape(base64Data.split(',')[1]);
    var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];
    var ia = new Uint8Array(byteString.length);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }
    return new Blob([ia], {type: mimeString});
};

//将blob转换为filef
function blobToFile(theBlob, fileName) {
    theBlob.lastModifiedDate = new Date();
    theBlob.name = fileName;
    return theBlob;
};
function send() {
    //生成图片格式base64包括：jpg、png格式
    var base64Data = canvas.toDataURL("image/jpeg", 1.0);
    //封装blob对象
    var blob = dataURItoBlob(base64Data);

    var file = blobToFile(blob, "imgSignature");

    //这里我打算用ajax方式，所以需要使用Formdata形式
    var data = new FormData();
    data.append("file", file);
   
    function ajax() {
        $.ajax({
            url: "http://localhost:8081/image",
            type: "POST",
            dataType: "JSON",
            data: data,
            contentType: false,
            processData: false,
            success: function (res) {
                let i = 0
                console.log(res);
                if (res.result.length == 0) return ajax() // 如果灭有找到重新找再次发请求
                if (res.result[0].score > 0.6) {
                    document.getElementById('lookModel').style.display = 'block'         
                } else {
                    document.getElementById('lookModel').style.display = 'none'                 
                }
                document.getElementById('none').style.display = "block"
                let html = ""
                res.result.forEach((val) => {
                    html += `${++i}  文件名：***${Math.round(Math.random() * 10000)}****<br>相似度：${val.score}<br><br> `
                })
                $("#html").html(html)
            }, error(error) {
              
            }
        });
    }

    ajax()
}

</script>
</html>